<template>
  <div  style="padding: 20px;height: 520px;overflow: auto">
    <h3>任务轨迹</h3>
    <Row style="margin: 25px 0;">
      <Col span="10" style="text-align: right">
        车牌号： <Input v-model="info.licensePlate" placeholder="请输入车牌号" disabled style="width: 320px" />
      </Col>
      <Col span="10" style="text-align: right">
        司机： <Input v-model="info.name" placeholder="请输入司机" disabled style="width: 320px" />
      </Col>
    </Row>
    <Row style="margin: 25px 0;">
      <Col span="10" style="text-align: right">
        计划发车时间： <Input v-model="info.planDepartureTime"  placeholder="请输入计划发车时间" disabled style="width: 320px" />
      </Col>
      <Col span="10" style="text-align: right">
        实际发车时间： <Input v-model="info.actualDepartureTime" placeholder="请输入实际发车时间" disabled style="width: 320px" />
      </Col>
    </Row>
    <Row style="margin: 25px 0;">
      <Col span="10" style="text-align: right">
        计划到达时间： <Input v-model="info.planArrivalTime" placeholder="请输入计划到达时间" disabled style="width: 320px" />
      </Col>
      <Col span="10" style="text-align: right">
        实际到达时间： <Input v-model="info.actualArrivalTime" placeholder="请输入实际到达时间" disabled style="width: 320px" />
      </Col>
    </Row>
    <h3 style="margin: 10px 0">轨迹查看</h3>
    <div id="container">
      <div id="panel"></div>
    </div>

  </div>
</template>
<script type="text/javascript">
import axios from "axios";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data(){
    return{
      id : this.$route.query.id,
      info:{},
      firstArr: [] // 中心点/初始坐标[121.49158559252436, 31.23724715206362]
    }
  },
  created(){
      this.queryTaskLocusInfo();

  },
  mounted () {
    window._AMapSecurityConfig = {
      securityJsCode: 'aa26195143721cc58d20294c8e672ed8' // 申请key对应的秘钥
    }
    //DOM初始化完成进行地图初始化
    setTimeout(() => {
      this.initMap() // 异步加载（否则报错initMap is not defined）
      // this.initroad()
    }, 1000)
  },

  methods:{
    queryTaskLocusInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-task-transport/queryTaskLocusInfoById/"+this.id);
      // console.log(rsp.data)
      this.info = rsp.data;
      this.info.planArrivalTime = new Date(this.info.planArrivalTime).toLocaleString();
      this.info.actualArrivalTime = new Date(this.info.actualArrivalTime).toLocaleString();
      this.info.planDepartureTime = new Date(this.info.planDepartureTime).toLocaleString();
      this.info.actualDepartureTime = new Date(this.info.actualDepartureTime).toLocaleString();

      this.firstArr = [this.info.startLongitude,this.info.startLatitude];
    },
    // 初始化地图
    initMap () {
      // console.log(this.info.startLatitude + " - "+this.info.startLongitude)

      AMapLoader.load({
        key: '107b7f4763513ea26105a82ea6820c5c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('container', {
          resizeEnable: true, // 窗口大小调整
          center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
          zoom: 15
        })
        // 添加maker
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.firstArr,
          icon: 'https://webapi.amap.com/images/car.png',
          offset: new AMap.Pixel(-26, -13), // 调整图片偏移
          autoRotation: true, // 自动旋转
          angle: -100 // 图片旋转角度
        });

        AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
        })

        //构造路线导航类
        this.driving = new AMap.Driving({
          map: this.map,
          panel: "panel"
        });
        // 根据起终点经纬度规划驾车导航路线
        this.driving.search(new AMap.LngLat(this.info.startLongitude, this.info.startLatitude), new AMap.LngLat(this.info.endLongitude, this.info.endLatitude), function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('绘制驾车路线完成')
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        });
      }).catch(e => {
        console.log(e)
      })


    },
  }
}
</script>

<style scoped>
#container{
  height: 500px;
  width: 90%;
  margin: 0 auto;
  position: relative;
}
#panel{
  position: absolute;
  right: 0;
  top: 0;
  width: 230px;
  z-index: 1;
}
</style>
